<lv-transfer
  #transfer
  class="ui-customer-transfer"
  [lvSourceData]="source.data"
  [lvTargetData]="source.selection"
  [lvSourceSelection]="source.selection"
  [lvRenders]="[sourceRender, targetRender]"
  [lvOperateTemplate]="[sourceOperation]"
  lvShowTotal="false"
  lvShowSelectionTotal="false"
  (lvSelectionChange)="selectionChange($event)"
></lv-transfer>

<ng-template #sourceOperation>
  <button lv-button lvType="link" (click)="selectAll()">全选所有</button>
</ng-template>

<ng-template #sourceRender>
  <ng-container *ngIf="data.length; else noData">
    <div class="ui-customer-transfer-source-render">
      <lv-tree
        #tree
        [lvData]="data"
        lvShowCheckbox
        lvSelectionMode="multiple"
        [(lvSelection)]="selection"
        [lvShowExpandedIcon]="{ expandIcon: 'lv-icon-arrow-down', collapseIcon: 'lv-icon-arrow-right' }"
        (lvSelectionChange)="change($event)"
      ></lv-tree>
    </div>
  </ng-container>
</ng-template>

<ng-template #targetRender let-data>
  <ng-container *ngIf="data.length; else noData">
    <div *ngFor="let item of data" class="ui-transfer-target-item">
      <div class="ui-transfer-target-item-info">
        <div class="ui-transfer-target-item-label" lv-overflow>{{ item.label }}</div>
        <div class="ui-transfer-target-item-auxiliary" lv-overflow>
          <ng-container *ngFor="let parent of getParent(item)">
            <span>{{ parent.label }}/</span>
          </ng-container>
        </div>
      </div>
      <i lv-icon="lv-icon-clear" class="ui-transfer-target-item-remove" (click)="remove(item)"></i>
    </div>
  </ng-container>
</ng-template>


<!--无数据-->
<ng-template #noData>
  <div style="display:flex;align-items: center;height: 100%;">
    <lv-empty></lv-empty>
  </div>
</ng-template>
